<script setup lang="ts">
import type { TableInstance } from 'element-plus'
import type { IndicatorInfo } from '@/types'

defineProps<{
  loading: boolean
  data: IndicatorInfo[]
}>()

const emits = defineEmits<{
  (e: 'indicator-selected', o: IndicatorInfo): void
}>()

const tableRef = ref<TableInstance>()
const [current, setCurrent]
  = useState<IndicatorInfo | null>(null)

function handleSelect(o: IndicatorInfo) {
  tableRef.value?.clearSelection()
  tableRef.value?.toggleRowSelection(o, true)
  setCurrent(o)
  emits('indicator-selected', o)
}

defineExpose({
  current,
})
</script>

<template>
  <ElTable
    ref="tableRef"
    v-loading="loading"
    element-loading-custom-class="global-loading"
    :data="data"
    height="100%"
    style="width: 100%"
    highlight-current-row
    current-row-key="id"
    border
    @select="(_, o) => handleSelect(o)"
    @row-click="o => handleSelect(o)"
  >
    <template #empty>
      <TableEmpty
        :image-size="120"
        text="选中用能单元查看统计指标"
      />
    </template>
    <ElTableColumn
      type="selection"
      fixed
      :width="40"
    />
    <ElTableColumn
      label="指标名称"
      prop="indicatorName"
    />
    <ElTableColumn
      label="指标编码"
      prop="indicatorNumber"
    />
    <ElTableColumn
      label="单位"
      prop="unit"
      :width="80"
    />
  </ElTable>
</template>

<style scoped>
:deep(.el-table__header .el-checkbox) {
  display: none;
}
</style>
